<template>
	<div class="collageIn">
		<pubHead title="拼团中"></pubHead>
		<div class="goods flex">
			<img class="img" v-if="allInfo.info.image" :src="allInfo.info.image" />
			<div class="goods-r flexv jus-b">
				<div class="twoline r-title">{{allInfo.info.goods_name}}</div>
				<div class="flex jus-b">
					<div>
						<span style="color: #EE1C1A;font-size: 0.36rem;">￥{{allInfo.info.goods_price}}</span>
						<span style="color: #999;font-size: 0.2rem;text-decoration: line-through;">￥{{allInfo.info.line_price}}</span>
					</div>
					<p style="font-size: 0.32rem;">X{{allInfo.info.total_num}}</p>
				</div>
			</div>
		</div>
		<div class="people">
			<div class="flex people-t ali-c jus-c">
				<div class="img-1" v-for="(item,index) in allInfo.list" :key='index'>
					<img :src="item.avatar" />
				</div>
				<!-- <div class="img-2" >
					<img src="../../assets/wenhao.png" />
				</div> -->
			</div>
			<div style="text-align: center;margin-top: 0.4rem;">
				<p v-if="allInfo.group_time>0 && allInfo.num>0">仅剩<span style="color: #F14645;font-size: 0.3rem;">{{allInfo.num}}</span>个名额，{{times}}后结束</p>
				<p v-if="allInfo.group_time<=0 && allInfo.num>0">团购时间已过，订单已取消！</p>
				<p v-if="allInfo.num==0">团购已满，请参加其他团</p>
			</div>
			<div v-if="allInfo.is_my==1 || allInfo.group_time<=0 || allInfo.num==0" class="people-btn" @click="toIndex">随便逛逛</div>
			<div v-if="allInfo.is_my==0 && allInfo.group_time>0 && allInfo.num>0" class="people-btn" @click="toTuan">立即参团</div>
			<p style="color: #999;font-size: 0.2rem;margin-top: 0.2rem;">{{allInfo.info.group_num}}人团，{{allInfo.info.hour}}小时人数不足则自动退款</p>
		</div>
		<!-- 当季热卖 -->
		<div class="hot_title flexc">
		    <img src="@/assets/a_best_sellers.png" alt="">
		</div>
		<!-- 热卖商品 -->
		<van-list v-model="loading" finished="finished" @load="getItems">
		    <div class="goods_lists flex-wrap">
		        <div class="goods-list flexv" @click="toxDetail(item.goods_id)" v-for="(item,index) in item_list" :key="index">
		            <div class="goods-img flex">
		                <img v-lazy="item.image" :src="item.image" class="goods_img" alt="" >
		            </div>
		            <div class="goods-info flexv jus-b flex1">
		                <p class="twoline title">{{item.goods_name}}</p>
		                <div class="goods-fix jus-b ali-c">
		                    <span>￥{{item.goods_price}}</span>
		                    <span class="sales tc" v-if="item.return_price>=0">分享赚￥{{item.return_price}}</span>
		                </div>
		            </div>
		        </div>
		    </div>
		</van-list>
		
	</div>
</template>

<script>
	import Vue from 'vue';
	import pubHead from '@/components/head';
	import { hotlist,groupbuying } from '@/request/api';
	import { Toast, Dialog, List } from 'vant';
	import {
			seckill_2,timestampToDate
		} from '@/config/utils.js';
	Vue.use(Toast, Dialog, List)
	export default{
		data(){
			return {
				status:0,
				page: 0,
				pagea: 0,
				pagesize: 10,
				finished: false,
				loading: false,
				item_list: [], // 推荐列表
				info:'',
				userInfo:'',
				goods_id:'',
				allInfo:'',//所有信息
				ID:'',
				group_id:'',
				times: '',
				timmer: '', // 倒计时
			}
		},
		components: {
			pubHead,
			"van-list":List,
		},
		created() {
			sessionStorage.removeItem('group_id')
			sessionStorage.removeItem('goods_id')
			sessionStorage.removeItem('ID')
			if(this.$route.query.info){
				this.info =JSON.parse(this.$route.query.info)
				this.status = this.info.status
			}
			if(this.$route.query.goods_id){
				this.group_id = this.$route.query.group_id
				this.goods_id = this.$route.query.goods_id
				this.ID = this.$route.query.id
				this.$loading()
				this.getData()
				// console.log(JSON.parse(this.$route.query.item),this.$route.query.id)
			}
			this.getItems()
		},
		methods:{
			// 获取当季热卖
			getData(){
				groupbuying({
					id:this.group_id,
					// goods_id:this.goods_id,
					token:localStorage.getItem('token')
				}).then(res=>{
					Toast.clear()
					if(res.code==1){
						this.allInfo = res.data
						this.cutDown(res.data.group_time)
					}
				})
			},
			toTuan(){
				this.$router.push('/collage?id='+this.ID+'&goods_id='+this.goods_id+'&groupbuy_id='+this.group_id+'&group_id='+this.group_id)
			},
			toIndex(){
				this.$router.push('/')
			},
			cutDown(time) {
					this.timmer = setInterval(() => {
						if (time >= 0) {
							this.times = timestampToDate(time);
							console.log(this.times)
							time=time-1;
						} else {
							clearInterval(this.timmer);
						}
					}, 1000)
			},
			getItems(){
			    hotlist({
			        token: localStorage.getItem('token'),
			        page: ++this.pagea,
			        pagesize: this.pagesize
			    }).then(res => {
			        Toast.clear();
			        if(res.code == 1){
			            this.finished = Number(res.data.hot_item) >= Number(this.pagesize) ? false : true;
			            if(res.data.hot_item.length > 0){
			                this.item_list = [...this.item_list,...res.data.hot_item];
			            }
			        }
			    })
			},
		}
	}
</script>

<style lang="less">
	.collageIn{
		min-height: 100vh;
		background-color: #f5f5f5;
		.goods{
			background-color: #fff;
			padding: 0.2rem;
			border-bottom: 0.01rem solid #e9e9e9;
			.img{
				width: 1.8rem;
				height: 1.8rem;
				border-radius: 0.1rem;
				margin-right: 0.2rem;
				
			}
			.goods-r{
				flex: 1;
				.r-title{
					font-size: 0.28rem;
					color: #333;
				}
			}
		}
		.people{
			background-color: #fff;
			padding: 0.3rem 0.2rem 0.2rem 0.2rem;
			.people-t{
				.img-1{
					width: 0.9rem;
					height: 0.9rem;
					margin-right: 0.2rem;
					img{
						width: 100%;
						height: 100%;
						border-radius: 100%;
					}
					&:first-child::before{
						content: '团长';
						position: relative;
						top: 0.1rem;
						left: 0.12rem;
						width: 0.58rem;
						height: 0.3rem;
						background: #50AD22;
						color: #fff;
						font-size: 0.22rem;
						border-radius: 0.15rem;
						padding: 0 0.1rem;
					}
					&:nth-child(n+2){
						img{
							margin-top: 0.3rem;
						}
					}
				}
				
				.img-2{
					width: 1rem;
					height: 1rem;
					img{
						margin-top: 0.33rem;
						width: 100%;
						height: 100%;
						border-radius: 100%;
					}
				}
			}
			.people-btn{
				height: 0.88rem;
				line-height: 0.88rem;
				background-color: #50AD22;
				border-radius: 0.44rem;
				color: #fff;
				font-size: 0.32rem;
				text-align: center;
				margin-top: 0.3rem;
			}
		}
		// 当季热卖
		.hot_title{
		    height: 0.88rem;
		    img{
		        height: 0.48rem;
		        margin: auto;
		    }
		}
		// 热卖商品
		.goods_lists{
		    margin-top: 0.2rem;
		    padding: 0 0.28rem;
		    .goods-list{
		        width: calc((100% - 0.2rem) / 2);
		        margin: 0 0.2rem 0.2rem 0;
		        padding: 0.2rem 0.2rem 0.3rem;
		        border-radius: 0.1rem;
		        background-color: #fff;
		        .goods-img{
		            width: 2.9rem;
		            height: 2.9rem;
		            margin: 0 auto;
		            border-radius: 0.1rem;
		            border: 0.01rem solid #f5f5f5;
		            overflow: hidden;
		            .goods_img{
		                margin: auto;
		            }
		        }
		        .goods-info{
		            margin-top: 0.2rem;
		            font-size: 0.28rem;
		            line-height: 120%;
		            color: #333;
		            .title{
		                line-height: 150%;
		            }
		            .goods-fix{
		                margin-top: 0.2rem;
		                font-size: 0.34rem;
		                color: #EE1C1A;
		                .sales{
		                    width: 1.3rem;
		                    height: 0.4rem;
		                    font-size: 0.2rem;
		                    line-height: 0.4rem;
		                    color: #EE1C1A;
		                    border-radius: 0.1rem;
		                    background-color: #FFF6F6;
		                }
		                img{
		                    width: 0.46rem;
		                    height: 0.46rem;
		                    margin: auto 0;
		                    border-radius: 100%;
		                }
		            }
		        }
		    }
		    .goods-list:nth-child(2n){
		        margin-right: 0;
		    }
		}
	}
</style>
